html,body{
    height: 100%;
    width: 100%;
    min-width: 1680px;
}

body{
    background-color: #0e0e0e;
}

@font-face {
    font-family: 'PlacardMTStd-Cond';
    src: url('../../font/PlacardMTStd-Cond.otf');
}

.top{
    width: 100%;
    height:40px;
}

.bottom{
    width: 100%;
    height:calc(100% - 40px);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.bottom .bottom-left{
    width: calc(100% - 478px);
    height: 100%;
}

.bottom .bottom-right{
    width: 478px;
    height: 100%;
}


.bottom .bottom-left .bottom-left-top{
    width: 100%;
    height: 540px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.bottom .bottom-left .bottom-left-bottom{
    width: 100%;
    height: calc(100% - 540px - 60px);
    overflow-x: scroll;
    position: relative;
}

.bottom .bottom-left .bottom-left-top .bottom-left-top-left{
    width: calc(100% - 960px);
    height: 100%;
}

.bottom .bottom-left .bottom-left-top .bottom-left-top-right{
    width: 960px;
    height: 100%;
}

.bottom .bottom-right .bottom-right-top{
    width: 100%;
    height: 540px;
}

.bottom .bottom-right .bottom-right-bottom{
    width: 100%;
    height: calc(100% - 540px);
}

.bottom .bottom-left-middle{
    width: 100%;
    height: 60px;
}